window.onload = function() {
  var submitButton = document.getElementById("beginButton");

  //An array of each of the possible lines to be displayed on the card--
  // The order is the same as for settings (below)
  var cardDisplays = document.getElementsByTagName("span");

  //Front and back <section>s
  var front = document.getElementById("front");
  var back = document.getElementById("back");
  var feedback = document.getElementById("feedback");

  function hideSection() {
    document.getElementById("setup").style.display = "none";
  }

  function readSettings() {
    //Keep track of which setting elements have been checked (not checked = 0)
    // Correspond to order presented: 
    // Front: forLangText, audio, natLangText, pronunciation;
    // Back: forLangText, audio, natLangText, pronunciation
    var settings = [0, 0, 0, 0, 0, 0, 0, 0];
    
    var inputArray = document.getElementsByTagName("input");
    
    for (var i = 0; i < inputArray.length; i++) {
      if (inputArray[i].checked) {
	settings[i] = 1;
      }
    }
    return settings;
  }

  function hideCardElements(settings) {
    for (var i = 0; i < settings.length; i++) {
      if (settings[i] == 0) {
	cardDisplays[i].innerHTML = null;
	//cardDisplays[i].style.fontSize = "0";
	//cardDisplays[i].style.lineHeight = "0";
      }
    }
  }

  function resizeText(settings) {
    //number of lines (incl. audio player) to be displayed on each side
    var frontLines = 0;
    //Sum of first 4 elements in settings = no. of lines on front
    for (var i = 0; i < 4; i++) {
      frontLines += settings[i];
    }

    //Sum of last 4 elements in settings = no. of lines on back
    var backLines = 0;
    for (var i = 4; i < settings.length; i++) {
      backLines += settings[i];
    }

    //Set font size according to number of elements present
    switch (frontLines) {
    case 1:
      front.style.lineHeight = "4.2em";
      break;
    case 2:
      front.style.lineHeight = "2em";
      break;
    case 3:
      front.style.lineHeight = "1.5em";
      break;
    default:
      break;
    }

    switch (backLines) {
    case 1:
      back.style.lineHeight = "4.2em";
      break;
    case 2:
      back.style.lineHeight = "2em";
      break;
    case 3:
      back.style.lineHeight = "1.5em";
      break;
    default:
      break;
    }

  }
  
  beginButton.onclick = function() {
    hideSection();
    var settings = readSettings();
    hideCardElements(settings);
    resizeText(settings);
  };

  showButton.onclick = function() {
    back.style.display = "block";
    feedback.style.display = "block";
    showButton.style.display = "none";
  };
};
